<template>
  <!-- 风玫瑰图 -->
  <view class="conter">
    <cc-goback title='风玫瑰图' color="#fff"></cc-goback>
    <view class="navigation_head"></view>
    <view class="head">
      <view class="box">
        <view class="head_left">
          <uni-datetime-picker type="date" :value="date" start="2020-6-15" end="2025-6-15" @change="dateChange">
          </uni-datetime-picker>
        </view>
        <view class="head_right">
          <image src="../../static/data_analysis/rili.png" mode=""></image>
        </view>
      </view>
      <view class="Line">
      </view>
      <view class="box_a">
        <view class="head_left">
          <uni-datetime-picker type="date" :value="date" start="2020-6-15" end="2025-6-15" @change="dateChange_a">
          </uni-datetime-picker>
        </view>
        <view class="head_right">
          <image src="../../static/data_analysis/rili.png" mode=""></image>
        </view>
      </view>
    </view>
    <view class="head_a">
      <view class="head_word">
        <ms-dropdown-menu>
          <ms-dropdown-item @input="mileage" v-model="value" :list="All_enterpriseList"></ms-dropdown-item>
        </ms-dropdown-menu>
      </view>
    </view>
    <!-- 风玫瑰图 -->
    <view class="foot">
      <view class="region">
        <echarts :option="option" style="height: 200px;width: 500px;" @click="echartsClick"></echarts>
      </view>
      <view class="numList" v-if="colorList">
        <view class="numList_a" v-for="(item,i) in colorList" :key='i'>
          <view class="color_box_a" v-if="i==0">
          </view>
          <view class="color_box_b" v-if="i==1">
          </view>
          <view class="color_box_c" v-if="i==2">
          </view>
          <view class="color_box_d" v-if="i==3">
          </view>
          <view class="color_box_e" v-if="i==4">
          </view>
          <view class="color_box_f" v-if="i==5">
          </view>
          <view class="color_box_g" v-if="i==6">
          </view>
          {{item}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue';
  import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
  import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
  export default {
    components: {
      echarts,
      msDropdownMenu,
      msDropdownItem
    },
    data() {
      return {
        date: '',
        value: 0,
        colorList: [],
        All_enterpriseList: [],
        enterprise_id: '',
        startTime: '',
        endTime: '',
        option: {
          angleAxis: {
            type: 'category',
            data: ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW']
          },
          radiusAxis: {},
          polar: {},
          series: [
            // {
            //   type: 'bar',
            //   data: [1, 2, 3, 4, 3, 5, 1, 1, 2, 3, 4, 3, 5, 1, 9, 8],
            //   coordinateSystem: 'polar',
            //   name: 'A',
            //   stack: 'a',
            //   emphasis: {
            //     focus: 'series'
            //   }
            // },
            // {
            //   type: 'bar',
            //   data: [2, 4, 6, 1, 3, 2, 1, 2, 4, 6, 1, 3, 2, 2, 4, 6],
            //   coordinateSystem: 'polar',
            //   name: 'B',
            //   stack: 'a',
            //   emphasis: {
            //     focus: 'series'
            //   }
            // },
            // {
            //   type: 'bar',
            //   data: [1, 2, 3, 4, 1, 2, 5, 1, 2, 3, 4, 1, 2, 5, 1, 2],
            //   coordinateSystem: 'polar',
            //   name: 'C',
            //   stack: 'a',
            //   emphasis: {
            //     focus: 'series'
            //   }
            // }, {
            //   type: 'bar',
            //   data: [1, 2, 3, 4, 1, 2, 5, 1, 2, 3, 4, 1, 2, 5, 1, 2],
            //   coordinateSystem: 'polar',
            //   name: 'D',
            //   stack: 'a',
            //   emphasis: {
            //     focus: 'series'
            //   }
            // }, {
            //   type: 'bar',
            //   data: [1, 2, 3, 4, 1, 2, 5, 1, 2, 3, 4, 1, 2, 5, 1, 2],
            //   coordinateSystem: 'polar',
            //   name: 'E',
            //   stack: 'a',
            //   emphasis: {
            //     focus: 'series'
            //   }
            // }, {
            //   type: 'bar',
            //   data: [1, 2, 3, 4, 1, 2, 5, 1, 2, 3, 4, 1, 2, 5, 1, 2],
            //   coordinateSystem: 'polar',
            //   name: 'F',
            //   stack: 'a',
            //   emphasis: {
            //     focus: 'series'
            //   }
            // }, {
            //   type: 'bar',
            //   data: [1, 2, 3, 4, 1, 2, 5, 1, 2, 3, 4, 1, 2, 5, 1, 2],
            //   coordinateSystem: 'polar',
            //   name: 'G',
            //   stack: 'a',
            //   emphasis: {
            //     focus: 'series'
            //   }
            // },
          ],
          // legend: {
          //   width: 500,
          //   bottom: -5,
          //   show: true,
          //   // data: ['A', 'B', 'C','D','E','F','G']
          // }
        }
      }
    },
    onLoad() {
      this.getAll_enterprise()
    },
    methods: {
      // 查询企业的总数和企业检测详情
      getAll_enterprise() {
        this.$http.get('/device/group/customerId', {}).then(res => {
          console.log('res', res)
          if (res.code == '00000') {
            const list = []
            res.data.forEach((item, index) => {
              list.push({
                text: item.abbreviation,
                id: item.id,
                value: index + 1
              })
            })
            list.unshift({
              text: '选择企业',
              value: 0
            })
            console.log('list', list)
            this.All_enterpriseList = list
          }
        })
      },
      // 获取玫瑰图数据
      getRose() {
        this.$http.get('/envirnment-air/app/analysis/windRose/index', {
          date: this.startTime + ',' + this.endTime,
          enterpriseId: this.enterprise_id
        }).then(res => {
          this.option.series = []
          console.log('res', res)
          const echartsList = []
          const echartsList_a = []
          const colorList = []
          // console.log('日历_24', res.data)
          res.data.forEach((item, index) => {
            colorList.push(item.windLevelName)
            // console.log('colorList',colorList)
            let obj = {
              type: 'bar',
              data: [],
              coordinateSystem: 'polar',
              name: item.windLevelName,
              stack: 'a',
              emphasis: {
                focus: 'series'
              }
            }
            item.list.forEach((item_a, i) => {
              // console.log(item_a)
              if (index == 0) {
                echartsList.push(item_a.key)
              }
              obj.data.push(item_a.value)

            })
            if (index == 0) {
              this.option.angleAxis.data = echartsList
              console.log(' this.option.angleAxis.data', this.option.angleAxis.data)
            }

            this.option.series.push(obj)
            // echartsList.push(item.key) 
            // echartsList_a.push(item.value) 
          })
          // console.log('日历_24', echartsList) 
          // console.log('日历_24', echartsList_a)
          this.colorList = colorList
          this.option.xAxis.data = echartsList
          this.option.series[0].data = echartsList_a
          this.$refs.update(this.option)
        })
      },
      mileage(e) {
        this.enterprise_id = e.id
        // console.log('enterprise_id',this.enterprise_id);
        this.getRose()
      },
      dateChange(e) {
        this.startTime = e
        // console.log('0000',this.startTime)
      },
      dateChange_a(e) {
        this.endTime = e
        // console.log('0000',this.endTime)
      },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
    }
  }
</script>

<style lang="scss">
  .conter {
    height: 100vh;
    background: #F7F7F7;
    overflow: hidden;
  }

  .uni-datetime-picker-timebox[data-v-6e13d7e2] {
    border: none !important;
  }

  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .head {
    width: 702rpx;
    height: 80rpx;
    margin: 20rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
  }

  .box {
    width: 47%;
    height: 80rpx;
    background-color: #FFFFFF;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .Line{
    width: 16rpx;
    height: 1rpx;
    background-color: #CCCCCC;
    }

  .box_a {
    width: 47%;
    height: 80rpx;
    background-color: #FFFFFF;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .head_left {
    margin-left: 20rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .head_right {
    margin-right: 30rpx;

    image {
      width: 24rpx;
      height: 24rpx;
    }
  }

  .head_a {
    width: 702rpx;
    height: 80rpx;
    margin: 20rpx auto;
    overflow: hidden;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }

  .foot {
    padding-top: 150rpx;
    width: 702rpx;
    height: 800rpx;
    margin: 20rpx auto;
    border-radius: 8rpx;
    background-color: #FFFFFF;
    // overflow: hidden;
  }

  .region {
    transform: translate(-25%, -20%);
  }

  .color_box_a {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
    background-color: #83D0EF;
  }

  .color_box_b {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
    background-color: #5B8FF9;
  }

  .color_box_c {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
    background-color: #66E3B1;
  }

  .color_box_d {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
    background-color: #7588AA;
  }

  .color_box_e {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
    background-color: #F1CA23;
  }

  .color_box_f {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
    background-color: #FF8B6E;
  }

  .color_box_g {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
    background-color: #FF4938;
  }

  .numList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    width: 600rpx;
    margin: 0 auto;
  }

  .numList_a {
    display: flex;
    align-items: center;
    width: 30%;
    height: 50rpx;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8C8C8C;
  }
</style>
